<template>
  <div class="model-detail">
    <!-- 头部信息 -->
    <div class="model-header">
      <div class="model-images">
        <el-carousel v-if="model.imageUrls && model.imageUrls.length > 0" height="400px" indicator-position="outside">
          <el-carousel-item v-for="(image, index) in model.imageUrls" :key="index">
            <img :src="image" alt="房产图片" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>
        <div v-else class="no-image">
          <el-icon size="80" color="#ccc"><Picture /></el-icon>
          <p>暂无图片</p>
        </div>
      </div>

      <div class="model-info">
        <h1 class="model-title">{{ model.name }}</h1>
        <div class="model-location">
          <el-icon><Location /></el-icon>
          <span>{{ model.province }} {{ model.city }} {{ model.district }} {{ model.address }}</span>
        </div>

        <div class="model-tags">
          <el-tag v-for="tag in modelTags" :key="tag" type="success" effect="light">
            {{ tag }}
          </el-tag>
        </div>

        <div class="model-price">
          <span v-if="model.facePrice" class="price-label">面议</span>
          <span v-else class="price-value">¥{{ formatPrice(model.price) }}</span>
        </div>
      </div>
    </div>

    <!-- 详细信息 -->
    <div class="model-details">
      <el-card class="detail-card">
        <template #header>
          <h3>房产详情</h3>
        </template>

        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">房产类型：</span>
              <span class="value">{{ model.type }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">建筑面积：</span>
              <span class="value" v-if="model.area > 0">{{ model.area }}㎡</span>
              <span class="value" v-else>未填写</span>
            </div>
          </el-col>
          <el-col :span="12" v-if="model.layout">
            <div class="detail-item">
              <span class="label">户型：</span>
              <span class="value">{{ model.layout }}</span>
            </div>
          </el-col>
          <el-col :span="12" v-if="model.floorInfo">
            <div class="detail-item">
              <span class="label">楼层信息：</span>
              <span class="value">{{ model.floorInfo }}</span>
            </div>
          </el-col>
          <el-col :span="12" v-if="model.buildYear > 1000">
            <div class="detail-item">
              <span class="label">建造年份：</span>
              <span class="value">{{ model.buildYear }}年</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">房产状态：</span>
              <el-tag :type="getStatusType(model.status)">{{ getStatusText(model.status) }}</el-tag>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 房产描述 -->
      <el-card class="description-card">
        <template #header>
          <h3>房产描述</h3>
        </template>
        <p class="description-text">{{ model.description }}</p>
      </el-card>

      <!-- 联系信息 -->
      <el-card class="contact-card">
        <template #header>
          <h3>联系方式</h3>
        </template>
        <div class="contact-info" v-for="item in phoneNumbers">
          <div v-if="item.name" class="contact-item">
            <el-icon><User /></el-icon>
            <span>联系人：{{ item.name }}</span>
          </div>
          <div v-if="item.phone" class="contact-item">
            <el-icon><Phone /></el-icon>
            <span>联系电话：{{ item.phone }}</span>
          </div>
        </div>

        <div class="contact-actions">
          <el-button type="primary" size="large" @click="handleContact">
            <el-icon><Phone /></el-icon>
            立即咨询
          </el-button>
          <el-button type="success" size="large" @click="handleFavorite">
            <el-icon><Star /></el-icon>
            收藏房源
          </el-button>
        </div>
      </el-card>

      <!-- 位置信息 -->
      <el-card class="location-card">
        <template #header>
          <h3>位置信息</h3>
        </template>
        <div class="location-info">
          <p><strong>详细地址：</strong>{{ model.province }} {{ model.city }} {{ model.district }} {{ model.address }}</p>
          <div v-if="model.position" class="coordinates">
            <p><strong>坐标位置：</strong>{{ model.position }}</p>
            <el-button type="text" @click="openMap">在地图中查看</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Location, Picture, User, Phone, Star } from '@element-plus/icons-vue'

import http from '@/apis/house'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

// 房产数据
const model = ref({
  name: '聚义街自建房出售',
  province: '云南省',
  city: '昆明市',
  district: '五华区',
  address: '聚义街20号',
  type: '住宅',
  area: 200,
  price: 0,
  facePrice: true,
  layout: '4室2厅2卫',
  floorInfo: '4层',
  buildYear: 2019,
  description: '带卫生间，厨房，学区房。',
  isFeatured: true,
  status: 100,
  imageUrls: [],
  tagsJson: '["黄金地段","临街商铺","高人流"]',
  position: '102.640491,24.976341',
  phone: null,
  contactPerson: null,
  createTime: '2025-07-25 00:00:00',
  updateTime: '2025-09-05 09:15:44',
  id: '1001'
})

const phoneNumbers = ref<Array<any>>([])
// 解析标签
const modelTags = computed(() => {
  try {
    return JSON.parse(model.value.tagsJson)
  } catch {
    return []
  }
})

// 格式化价格
const formatPrice = (price: number) => {
  if (price >= 10000) {
    return (price / 10000).toFixed(1) + '万'
  }
  return price.toLocaleString()
}

// 获取状态类型
const getStatusType = (status: number) => {
  switch (status) {
    case 100:
      return 'success'
    case 200:
      return 'warning'
    case 300:
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 100:
      return '在售'
    case 200:
      return '预售'
    case 300:
      return '已售'
    default:
      return '未知'
  }
}

// 联系房主
const handleContact = () => {
  if (model.value.phone) {
    window.open(`tel:${model.value.phone}`)
  } else {
    ElMessage.info('暂无联系方式，请通过平台咨询')
  }
}

// 收藏房源
const handleFavorite = () => {
  ElMessage.success('已收藏该房源')
}

// 分享房源
const handleShare = () => {
  // 复制链接到剪贴板
  navigator.clipboard.writeText(window.location.href)
  ElMessage.success('链接已复制到剪贴板')
}

// 打开地图
const openMap = () => {
  const [lng, lat] = model.value.position.split(',')
  const mapUrl = `https://uri.amap.com/marker?position=${lng},${lat}&name=${model.value.name}`
  window.open(mapUrl, '_blank')
}

const fetchData = () => {
  http.fetchById(route.query.id as string).then((response) => {
    let { code, message, result } = response.data
    if (code !== 200) {
      ElMessage.error(message)
      return
    }
    result.imageUrls = JSON.parse(result.imageUrls)
    result.tagsJson = JSON.parse(result.tagsJson)
    console.log(result)
    model.value = result
    if (result.phoneNumbers) {
      phoneNumbers.value = JSON.parse(result.phoneNumbers)
    }
  })
}
onMounted(() => {
  if (route.query.id) {
    fetchData()
  }
})
</script>

<style scoped>
.model-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.model-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.model-images {
  border-radius: 12px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.no-image {
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 12px;
  color: #999;
}

.model-info {
  padding: 20px 0;
}

.model-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
}

.model-location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: #666;
  font-size: 16px;
}

.model-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.model-price {
  font-size: 32px;
  font-weight: 700;
  color: #e74c3c;
}

.price-label {
  color: #f39c12;
}

.model-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-card,
.description-card,
.contact-card,
.location-card {
  border-radius: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.detail-item .label {
  font-weight: 500;
  color: #666;
  min-width: 100px;
}

.detail-item .value {
  color: #2c3e50;
  font-weight: 500;
}

.description-text {
  line-height: 1.8;
  color: #555;
  font-size: 16px;
  white-space: pre-line;
}

.contact-info {
  margin-bottom: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
}

.no-contact {
  text-align: center;
  color: #999;
  margin-bottom: 20px;
}

.contact-actions {
  display: flex;
  gap: 15px;
}

.location-info p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.coordinates {
  margin-top: 15px;
}

.action-buttons {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  background: white;
  padding: 15px 20px;
  border-radius: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .model-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .model-title {
    font-size: 24px;
  }

  .model-price {
    font-size: 28px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .action-buttons {
    position: static;
    transform: none;
    margin-top: 30px;
    justify-content: center;
  }
}
</style>
